<template>
    <div class="top-bar">
        <div class="world">
            <Castle v-for="(player, index) in players" :player="player" :key="index" :index="index"></Castle>
            <div class="land"></div>
        </div>
        <div class="player p0">{{players[0].name}}</div>
        <div class="turn-counter">
            <img src="../svg/turn.svg" alt="" class="arrow">
            <div class="turn">Turn {{turn}}</div>
        </div>
       
        <div class="player p1">{{players[1].name}}</div>

        
    </div>
</template>

<script>
import Castle from './castle'
export default {
    props:['players', 'currentPlayerIndex', 'turn'],
    components: {
        Castle,
    },
}
</script>

